<template>
	<view class="boxs">
		<u-image
		    width="100%"
		    src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/12/02/3813dfcec5bf4af68465cf91f910b839.jpg"
		    mode="widthFix"
		    height="auto"
		/>
		<u-gap height="40" />
		<view class="cardBtn">
			<u-button :customStyle="receiveBtn" text="立即领取"
				:color="memberBtn ? '#588BF3' : '#777'" shape="circle" @click="memberBtn ? member() : ''" />
		</view>
		
		
		<u-popup :round="20" :show="showAddress" @close="close" @open="open">
			<view>
				<view class="takeAddress">
					<text>收货地址</text>
					<view @click="closeAddress" class="closeAddress">
						<u-icon name="close" color="#7B7B7B" size="20" bold />
					</view>
				</view>
				<view class="box">
					<view class="manageAddress flex_wrap row_between row_middle">
						<view>常用地址</view>
						<u-icon @click="addAddress" name="plus" size="30rpx" color="#538CFF " label="新增"
							labelSize="32rpx" labelColor="#538CFF" space="4rpx" />
					</view>
					<view class="noaddress" v-if="addressList.length == 0">
						<u-icon
							name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/11/27/e12ad7ba162b47b1a8e59083e226583a.png"
							size="160rpx" labelSize="28rpx" labelColor="#999" space="48rpx" label="暂无任何收货地址"
							labelPos="bottom" />
					</view>
					<view class="address_list" v-if="addressList.length > 0">
						<scroll-view scroll-y="true" class="address_list_elsebg'">
							<view v-for="(address, index) in addressList" :key="address"
								class="address_list_elsebgList">
								<view class="flex_wrap row_between">
									<u-icon
										name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/11/27/4fa0ed23eaf647fea0671129e6483dcf.png"
										size="61rpx"></u-icon>
									<view class="locations">
										<view class="locations_name flex_wrap">
											<text>{{ address.consigneeName }}</text>
											<text>{{
				                                address.consigneeMobile
				                            }}</text>
											<text class="default" v-if="address.defaultAddress == '1'">默认</text>
										</view>
										<view class="locations_detail">{{ address.province }}{{ address.city
				                            }}{{ address.county
				                            }}{{ address.address }}</view>
									</view>
									<u-radio-group placement="column" @change="groupChange" v-model="radiovalue1">
										<u-radio :name="address.id" :key="index" iconSize="50rpx" size="60rpx"
											inactiveColor="#999" activeColor="#588BF3 " />
									</u-radio-group>
								</view>
								<u-gap marginTop="32rpx" marginBottom="20rpx" height="2rpx;" bgColor="#F3F3F3" />
								<view class="flex_wrap row_between del">
									<u-icon name="trash-fill" label="删除" labelSize="24rpx" @click="
				                            del(address.id, address.defaultAddress)
				                        " />
									<u-icon
										name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/11/27/3ce1b395adcf42e2996774f6d8bdca3b.pn"
										bold label="编辑" labelSize="24rpx" labelColor="#588BF3"
										@click="to_edit(address.id)" />
								</view>
							</view>
						</scroll-view>
					</view>
					<u-button text="确定选中" color="#588BF3" :customStyle="{
				            ...buttonCustomStyle2,
				            width: '694rpx',
				            marginBottom: '80rpx',
				        }" shape="circle" @click="sureAddress" />
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		toBeSalesman,
		placeChickenAnOrder,
		checkHaveOrderMember,
		getReceiveBtn
	} from "@/api/card.js";
	import store from "@/store";
	import {
		mapGetters
	} from "vuex"
	import {
		getShippingAddress,
		deleteAddress,
		editDefaultAddress,
		editAddressIdForOrder
	} from "@/api/shop.js";
	export default {
		data() {
			return {
				receiveBtn: {
					color: '#fff',
					height: "88rpx",
				},
				memberBtn:false,
				
				showAddress: false,
				ShippingAddress: {},
				radiovalue1: "", //默认选中
				changeDetail: "", //切换选中的
				buttonCustomStyle2: {
					width: "526rpx",
					height: "80rpx",
					outline: "none",
					border: "none",
				},
				consigneeId: "",
				orderNum: ''
			}
		},
		onLoad(op) {
			this.isLogin && this.getReceive()
		},
		computed: mapGetters(["isLogin", "userInfo", "addressList"]),
		created() {
			this.isLogin && this.$store.dispatch("GET_ADDRESS_LIST");
		},
		methods: {
			async getReceive() {
				const res = await getReceiveBtn();
				console.log(res, '按钮显示>>>')
				if (res.data && res.data.orderStatus == 2) {
					this.orderNum = res.data.orderNum
					console.log(this.orderNum, 'this.orderNum>>')
					this.memberBtn = true
				}
			},
			member() {
				this.showAddress = true
			},
			
			open() {},
			close() {
				this.showAddress = false;
			},
			//修改选中地址按钮
			groupChange(n) {
				this.changeDetail = this.addressList.filter((v) => v.id === n)[0];
			},
			sureAddress() {
				console.log(this.radiovalue1, 'this.radiovalue1>>>')
				if (!this.radiovalue1) return uni.$u.toast("请先勾选地址！");
				const params = {
					consigneeId: this.radiovalue1,
					orderNum: this.orderNum,
				};
				console.log(params, "params地址切换");
				editAddressIdForOrder(params).then((res) => {
					this.showAddress = false
					uni.navigateBack({
					    delta: 1 // 默认值是1，表示返回的页面层数
					});
				});
			},
			//删除地址
			del(id, defaultAddress) {
				console.log(id, defaultAddress, "删除");
				const that = this;
				uni.showModal({
					title: "",
					content: "确定要删除该地址吗？",
					success({
						confirm,
						cancel
					}) {
						if (confirm) {
							deleteAddress(id).then((res) => {
								uni.$u.toast("删除成功！");
								that.getShippingAddress();
							});
						}
					},
				});
			},
			closeAddress() {
				this.showAddress = false;
			},
			// 获取地址列表
			getShippingAddress(pageNo, pageSize) {
				this.$store.dispatch("GET_ADDRESS_LIST");
			},
			// 编辑按钮
			to_edit(key) {
				uni.navigateTo({
					url: "/pages_shop1/userAddress/edit?addressId=" + key,
				});
			},
			// 新增按钮
			addAddress() {
				uni.navigateTo({
					url: "/pages_shop1/userAddress/index",
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.boxs{
		height: 100%;
	}
	.cardBtn {
		width: 100%;
		padding: 18rpx 24rpx;
		background-color: #fff;
		height: 176rpx;
		position: fixed;
		bottom: 0;
	}
	
	
	.box {
		background: #F5F7F9;
	}
	// 收货地址弹框
	.takeAddress {
		height: 120rpx;
		background: #e2ebff;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		line-height: 120rpx;
		text-align: center;
		font-size: 40rpx;
		font-weight: 500;
		color: #3d3d3d;
	}
	.manageAddress {
		padding: 28rpx 28rpx 28rpx 40rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.noaddress {
		margin: 120rpx auto 240rpx;
	}
	.address_list {
		padding: 0 28rpx 92rpx;
		// max-height: 900rpx;
		overflow: hidden;
		&_bg {
			padding: 40rpx 28rpx 32rpx;
			max-height: 900rpx;
			background: #ffffff;
			border-radius: 20rpx;
			overflow-y: auto;
		}
	
		&_elsebg {
			max-height: 900rpx;
			border-radius: 20rpx;
			// overflow-y: auto;
		}
	
		&_elsebgList {
			background: #ffffff;
			border-radius: 20rpx;
			margin-bottom: 40rpx;
			padding: 40rpx 28rpx 12rpx;
		}
	}
	.del {
		padding-left: 88rpx;
	}
	.locations {
		width: 100%;
		padding: 0 16rpx 0 26rpx;
		text-align: left;
	
		&_name {
			font-size: 28rpx;
			color: #3d3d3d;
			font-weight: 500;
	
			text {
				margin-right: 32rpx;
			}
	
			.default {
				margin-left: -12rpx;
				width: 86rpx;
				height: 36rpx;
				border-radius: 4rpx;
				border: 2rpx solid #588bf3;
				font-size: 24rpx;
				color: #588bf3;
				display: block;
				text-align: center;
				font-weight: 400;
			}
		}
	
		&_detail {
			size: 24rpx;
			color: #666;
			font-weight: 400;
		}
	}
	.closeAddress {
		position: absolute;
		top: 40rpx;
		right: 32rpx;
	}
</style>